<template>
  <div>
    <el-dropdown @command="changeFont" trigger="click">
      <i class="iconfont icon-ziti"></i>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :icon="CaretRight" :command="'large'" :disabled="size == 'large'">超大</el-dropdown-item>
          <el-dropdown-item :command="''" :icon="CaretRight" :disabled="size == ''">默认</el-dropdown-item>
          <el-dropdown-item :icon="CaretRight" :command="'small'" :disabled="size == 'small'">较小</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import { CaretRight } from "@element-plus/icons-vue";
export default {
  components: {
    CaretRight,
  },
  data() {
    return {
      size: "",
    };
  },
  setup() {
    return {
      CaretRight,
    };
  },
  created() {
    this.size = sessionStorage.getItem("font");
  },
  methods: {
    changeFont(e) {
      this.size = e;
      this.$emit("changeFont", this.size);
    },
  },
};
</script>
<style scoped lang="less">
i {
  font-size: 30px;
}
</style>
